<template>
  <div class="base-view-wrapper flex-row contain">
    <div class="contain-left flex-column">
      <el-form :inline="true" :model="filterData" class="search">
        <el-form-item label="">
          <el-input clearable placeholder="请输入角色名称" v-model="filterData.name" />
        </el-form-item>
        <el-form-item>
          <el-button :icon="Search" @click="search" />
          <el-button type="primary" @click="editFormVisible = true"> 新增 </el-button>
        </el-form-item>
      </el-form>
      <div id="table_contain" class="flex-100">
        <CustomTable
          :height="tableHeight"
          :columns="columns"
          @row-click="rowClick"
          v-loading="loading"
          :data="tableData"
        >
          <template #edit="{ row }">
            <el-button
              size="small"
              plain
              :icon="Edit"
              type="primary"
              @click="onAuthorityEditForm(row)"
            >
              权限配置
            </el-button>
            <el-button size="small" plain :icon="Edit" type="warning" @click="edit(row)">
              编辑
            </el-button>
            <el-button size="small" plain :icon="Delete" type="danger" @click="del(row)">
              删除
            </el-button>
          </template>
        </CustomTable>
      </div>
      <Page
        :page-data="pageData"
        :total="total"
        @page-no-change="pageNoChange"
        @page-size-change="pageSizeChange"
      />
    </div>
    <div class="contain-right">
      <user-list ref="userListRef"></user-list>
    </div>

    <RoleEditForm v-model:visible="editFormVisible" v-model:data="rowData" @submit="search" />
    <RoleAuthorityEditForm
      v-model:visible="authorityEditForm"
      v-model:data="rowData"
      @submit="search"
    />
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue'
import { deleteRole, selectRole, sysRolePage } from '@/api/system'
import CustomTable from '@/components/CustomTable'
import { ElMessage, ElMessageBox } from 'element-plus'
import { usePage } from '@/hooks/usePage'
import Page from '@/components/Page.vue'
import UserList from './components/UserList.vue'
import { Delete, Edit, Search } from '@element-plus/icons-vue'
import RoleAuthorityEditForm from './components/RoleAuthorityEditForm.vue'
import RoleEditForm from './components/RoleEditForm.vue'
import { useCalcTableHeight } from '@/hooks/useCalcTableHeight'

const userListRef = ref()
let rowData = ref<any>(null)
const columns: any[] = [
  { prop: 'roleName', label: '角色名称' },
  { prop: 'roleCode', label: 'code' },
  { prop: 'edit', label: '操作', template: true, width: 300 }
]
const editFormVisible = ref<boolean>(false)
const authorityEditForm = ref<boolean>(false)
const { tableHeight } = useCalcTableHeight()
let filterData = ref({ name: '' })
const { loading, tableData, pageData, total, search, pageNoChange, pageSizeChange } = usePage(
  sysRolePage,
  filterData
)

async function edit(row: any) {
  const { data, success } = await selectRole(row?.id)
  if (!success) {
    return
  }
  rowData.value = data
  editFormVisible.value = true
}

function onAuthorityEditForm(row: any) {
  rowData.value = row
  authorityEditForm.value = true
}

async function del(row: any) {
  ElMessageBox.confirm(`是否删除${row.roleName}?`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    const { success, msg } = await deleteRole(row?.id)
    if (!success) {
      ElMessage.error(msg)
      return
    }
    ElMessage.success('操作成功')
    await search()
  })
}

function rowClick(data: any) {
  userListRef.value.initList(data.id)
}

onMounted(async () => {
  await search()
})
watch(
  tableData,
  async (value) => {
    userListRef.value.initList(value?.[0]?.id)
  },
  { deep: true }
)
</script>

<style scoped lang="scss">
.contain {
  justify-content: space-between;
}

.contain-left {
  width: 57%;
}

.contain-right {
  width: 40%;
}
</style>
